<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 999;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;background-color: #FFF;position: fixed;top: 10;left: 0;z-index: 999;" >
			<view style="display: flex;justify-content: flex-start;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="margin-left: 32rpx;display: flex;align-items: center;justify-content: center;">
					<image
						:src="expertUserInfo.avatar"
						style="width:48rpx;height: 48rpx;border-radius: 50%;"
					></image>
				</view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">{{expertUserInfo.nickname}}</view>
				<view style="width: 36rpx;height: 36rpx;border-radius: 50%;background-color: #FFF0D8;margin-left: 16rpx;display: flex;justify-content: center;align-items: center; box-sizing: border-box;">
					<image
						src="/static/images/icon/fire.png"
						style="width:24rpx;height: 24rpx;"
					></image>
				</view>
			</view>
			
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;align-items: center;gap: 22rpx;">
				<view style="display: flex;align-items: center;justify-content: center;" @click="showReport=true">
					<view style="color: #27C5D6;border: 2rpx solid #27C5D6;border-radius: 200rpx;padding: 5rpx 40rpx; ">追蹤</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;" @click="showReport = true">
					<image
						src="/static/images/icon/tools-circle.svg"
						style="width:46rpx;height: 46rpx;"
					></image>	
				</view>
			</view>
		</view>
		<view style="width: 100%;background-color: #FFF;padding-top: 60rpx;">
			<view style="margin-top: 16rpx;position: relative;">
				<u-swiper :list="banner_list" @change="e => current = e.current" height="945" >
					<view slot="indicator" class="indicator">
						<view
							class="indicator__dot"
							v-for="(item, index) in banner_list"
							:key="index"
							:class="[index === current && 'indicator__dot--active']"
						>
						</view>
					</view>
				</u-swiper>
				<view style="position: absolute;top: 40rpx;right: 40rpx;border-radius: 200rpx;background: rgba(0, 0, 0, 0.4);padding: 4rpx 16rpx;">
					<view style="color: #FFF;letter-spacing: 4rpx;font-size: 26rpx;" >{{current+1}}/{{banner_list.length}}</view>
				</view>
			</view>
			<view>
				<view style="margin-top: 20rpx;color: #232426;font-size: 32rpx;font-weight: 600;line-height: 140%;letter-spacing: 0.64rpx;padding: 0 32rpx;">
					{{archives.title}}
				</view>
				
				
				<view style="width: 100%;margin-bottom: 80rpx;box-sizing: border-box;">

					
					<!--簡介-->
					<view id="profile">
						<view class="tab-content">
							<view style="padding: 40rpx 0;">
								<u-parse :content="richText"></u-parse>
							</view>
							<!--地點-->
							<view style="padding:36rpx 0;" id="address">
								<view style="width: 100%;margin-top: 24rpx;display: inline-flex;">
									<view style="display: flex;justify-content: flex-start;background-color: #EDF5FF;padding:16rpx 24rpx;border-radius: 12rpx;flex-wrap: nowrap;">
										<view>
											<u-image
												src="/static/images/icon/map-success.png"
												width="32rpx"
												height="32rpx"
											></u-image>
										</view>
										<view style="color: #1AAEC0;font-size: 28rpx;margin-left: 16rpx;">{{ archives.address }}</view>
										
									</view>
								</view>
							</view>
							<!--地點結束-->
							<view style="width: 100%;margin: 56rpx 0;">
								<view style="padding: 2px 10px;border-radius: 6px;background:#F0F0F0;color:#6A707C;font-size: 28rpx;width: 156rpx;text-align: center;">{{ archives.category }}</view>
							</view>
						</view>
					</view>
					<!--簡介結束-->
					
					<view v-if="commentList.length > 0" style="background-color: #F0F0F0;width: 100%;height: 2rpx;"></view>
					
					<!--評價-->
					<view v-if="commentList.length > 0" style="padding:36rpx 32rpx;display: inline-block;width: 100%;box-sizing: border-box;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">留言</view>
							<view style="color: #27C5D6;font-size: 26rpx;margin-left: 12rpx;">{{archives.commentCount}}</view>
						</view>
						<view v-for="(item,index) in commentList" :key="index">
							<view style="display: flex;justify-content: space-between;width:100%;margin-top: 44rpx;">
								<view style="width: 64rpx;">
									<u-image
										:src="item.avatar"
										width="64rpx"
										height="64rpx"
										shape="circle"
									></u-image>
								</view>
								<view style="box-sizing: border-box;min-width: 600rpx;margin-left: 16rpx;">
									<view style="display: flex;justify-content: space-between;align-items: center;">
										<view style="display: flex;justify-content: flex-start;align-items: center;">
											<view style="font-size: 28rpx;font-weight: 600;">{{item.nickname}}</view>
											<view style="color: #808690;font-size: 24rpx;margin-left: 16rpx;">{{item.city}}</view>
										</view>
										<view style="display: flex;justify-content: flex-end;align-items: center;">
											<view style="display: flex;justify-content: flex-start;align-items: center;">
												<u-icon
													v-if="item.is_likes"
													name="thumb-up-fill"
													size="24"
													color="#27C5D6"
												></u-icon>
												<u-icon
													v-else
													name="thumb-up"
													size="24"
													color="#808690;"
												></u-icon>
												<view v-if="item.is_likes" style="color: #27C5D6;font-size: 24rpx;">
													{{item.likes}}
												</view>
												<view v-else style="color: #808690;font-size: 24rpx;">
													{{item.likes}}
												</view>
											</view>
											<view style="margin-left: 24rpx;">
												<u-icon
													name="more-dot-fill"
													size="24"
												></u-icon>
											</view>
										</view>
									</view>
									<view style="margin-top: 12rpx;">
										<view style="color: #378CFC;font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.bio}}</view>
									</view>
									<view style="margin-top: 28rpx;">
										<view>
											<u-parse :content="item.content"></u-parse>
										</view>
									</view>
									<view v-if="item.image">
										<view style="display: flex;justify-content: flex-start;align-items: center;">
											<u-image
												:src="item.image"
												width="72"
												height="72"
											></u-image>
										</view>
									</view>
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<view style="color: #808690;font-size: 20rpx;">
											B{{index+1}}, {{item.createDate}}
										</view>
										<view style="font-size: 24rpx;color: #232426;margin-left: 20rpx;">
											回復
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--評價結束-->
				</view>
				
				<!-- <view style="height: 80rpx;"></view> -->
				
				<!--底欄-->
				<view style="position: fixed;bottom: 0;left: 0; width: 100%;box-sizing: border-box;border-top: 1rpx solid #F6F8FA;padding: 20rpx 24rpx 30rpx;z-index: 999;background-color: #FFF;">
					<view v-if="!showReplay" style="display: flex;justify-content: space-between;align-items: center;">
						<view style="width: 40%;">
							<view @click="showReplayFn" style="width: 100%;display: flex;justify-content: flex-start;align-items: center;border: 2rpx solid #E5E6E8;border-radius: 32rpx;padding: 8rpx 24rpx;background-color: #F6F8FA;">
								<u-icon
									name="edit-pen"
								></u-icon>
								<view style="color: #3f3f3f;">我想說...</view>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;width: 60%;align-items: center;">
							<view style="width:100rpx;text-align: center;margin-left: 8rpx;">
								<image
									v-if="commentList.length > 0"
									src="/static/images/icon/message_active.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<image
									v-else
									src="/static/images/icon/message.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<view style="color: #27C5D6;font-size: 24rpx;" v-if="commentList.length > 0">{{commentList.length}}</view>
								<view style="color: #232426;font-size: 24rpx;" v-else>0</view>
							</view>
							<view style="width:100rpx;text-align: center;" @click="handleLike">
								<image
									v-if="archives.is_like"
									src="/static/images/icon/likes-active.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<image
									v-else
									src="/static/images/icon/likes-black.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<view style="color: #27C5D6;font-size: 24rpx;" v-if="archives.is_like">{{archives.likes}}</view>
								<view style="color: #232426;font-size: 24rpx;" v-else>{{archives.likes}}</view>
							</view>
							
							<view style="width:100rpx;text-align: center;margin-left: 8rpx;" @click="handleStar">
								<image
									v-if="archives.is_favorite"
									src="/static/images/icon/tag-active.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<image
									v-else
									src="/static/images/icon/tag.png"
									width="44rpx"
									height="44rpx"
									style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
								></image>
								<view style="color: #27C5D6;font-size: 24rpx;" v-if="archives.is_favorite">{{archives.collection}}</view>
								<view style="color: #232426;font-size: 24rpx;" v-else>{{archives.collection}}</view>
							</view>
						</view>
					</view>
					<view v-else>
						<view style="width: 100%;border: 2rpx solid #E5E6E8;border-radius: 32rpx;padding: 8rpx 24rpx;background-color: #F6F8FA;box-sizing: border-box;">
							<u-textarea
								
								border="none"
								v-model="replayContent"
								height="140" 
								@blur="isFocus = false"
							></u-textarea>
						</view>
						<view style="margin:20rpx 0 0;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;">
							<view style="display: flex;justify-content: flex-start;align-items: center;">
								<view @click="chooseImg">
									<u-image
										src="/static/images/icon/image.png"
										width="48rpx"
										height="48rpx"
									></u-image>
								</view>
								<view style="margin-left: 40rpx;">
									<u-image
										src="/static/images/icon/at-black.png"
										width="48rpx"
										height="48rpx"
									></u-image>
								</view>
							</view>
							<view>
								<view @click="sendReplayFn" style="border: 2rpx solid #27C5D6;border-radius: 200rpx; background-color: #27C5D6;color: #FFF;padding: 8rpx 40rpx;">送出</view>
								<!-- <view style="border: 2rpx solid #E5E6E8;border-radius: 200rpx; background-color: #F6F8FA;color: #878787;padding: 8rpx 40rpx;">取消</view> -->
							</view>
						</view>
					</view>
					<view v-if="commentSrc.length > 0" style="width: 200px;display: flex;justify-content: flex-start;align-items: flex-start;">
						<u-image
							:src="commentSrc"
							
						></u-image>
						<view @click="removeCommentImg">
							<u-icon
								name="close-circle"
								size="24rpx"
								radius="24"
							></u-icon>
						</view>
					</view>
				</view>
				<!--底欄結束-->
			</view>
		</view>
		
		
		
		<!--檢舉對方-->
		<u-popup :show="showReport" mode="bottom" round="48rpx">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view style="width: 180rpx;color: #808690;font-size: 32rpx;text-align: left;" @click="showReport=false">取消</view>
					<view style="font-size: 30rpx;color:#232426;font-weight: 600;text-align: center;">檢舉對方?</view>
					<view style="width: 180rpx;color: #27C5D6;font-size: 32rpx;text-align: right;" @click="sendReportFn">送出</view>
				</view>
				<view class="popup-reserve-body">
					<view style="color: #FF3D43;font-size:24rpx;width:100%;text-align: center;">檢舉後您將無法再與對方聯繫，請選擇檢舉原因：</view>
					<view style="margin-top: 32rpx;">
						<view v-for="(item,index) in reportList" :key="index">
							<view @click="setReport(item.id)" style="display: flex;justify-content: flex-start;padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;margin-bottom: 32rpx;">
								<view>
									<u-image
										v-if="item.id == reportId"
										src="/static/images/icon/success-solid.png"
										width="48rpx"
										height="48rpx"
									></u-image>
									<view v-else style="border-radius: 50%;width: 48rpx;height: 48rpx;background-color: #E5E6E8;"></view>
								</view>
								<view style="margin-left: 32rpx;">{{item.title}}</view>
							</view>
						</view>
						<view v-if="reportId==4" style="padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;display: flex;justify-content: flex-start;align-items: center;">
							<u-input name="title" placeholder="請說明原因" v-model="reportTitle" border="none" maxlength="20" @change="handleInput"></u-input>
							<view style="color:#BEC0C5;font-size: 20rpx;display: flex;justify-content: flex-end;">
								{{reportFontNum}} / 100
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
		<!--檢舉對方結束-->
	</view>
</template>

<script>
	import { archivesDetail, archivesStart, archivesLikes, commentReplay, getComment } from '@/config/api.js';
	
	export default {
		data() {
			return {
				id:0,
				userid:0,
				guide:true,
				author:false,
				userInfo:{
					nickname:'',
					avatar:''
				},
				expertUserInfo:{
					nickname:'Wangyuru',
					avatar:'https://www.onlyrent.tw/uploads/20250403/3563c09c29ec27c38e2f331e52f8a026.jpeg',
					bio:''
				},
				archives:{
					id:0,
					title:'',
					price:0,
					unitValue:'',
					updatetime:'',
					address:'',
					commentCount:0,
					likes:0,
					collection:0,
					is_like:0,
					is_favorite:0,
					orderNumber:0,
					channel_type:0,
					category:''
				},
				commentList:[],
				current:0,
				banner_list:[],
				navTab:1,
				richText:``,
				showReserve:false,
				navHeight:840,
				isFixed:false,
				targetElement:{profile:0,timer:0,address:0,evaluate:0},
				week:1,
				weekList:[{
					id:1,
					titlle:'一'
				},{
					id:2,
					titlle:'二'
				},{
					id:3,
					titlle:'三'
				},{
					id:4,
					titlle:'四'
				},{
					id:5,
					titlle:'五'
				},{
					id:6,
					titlle:'六'
				},{
					id:0,
					titlle:'日'
				}],
				dateList:[{
					id:1,
					title:'凌晨',
					children:[{
						id:0,
						title:'00:00'
					},{
						id:1,
						title:'01:00'
					},{
						id:2,
						title:'02:00'
					},{
						id:3,
						title:'03:00'
					},{
						id:4,
						title:'04:00'
					},{
						id:5,
						title:'05:00'
					}]
				},{
					id:2,
					title:'早上',
					children:[{
						id:6,
						title:'06:00'
					},{
						id:7,
						title:'07:00'
					},{
						id:8,
						title:'08:00'
					},{
						id:9,
						title:'09:00'
					},{
						id:10,
						title:'10:00'
					},{
						id:11,
						title:'11:00'
					}]
				},{
					id:3,
					title:'傍晚',
					children:[{
						id:12,
						title:'12:00'
					},{
						id:13,
						title:'13:00'
					},{
						id:14,
						title:'14:00'
					},{
						id:15,
						title:'15:00'
					},{
						id:16,
						title:'16:00'
					},{
						id:17,
						title:'17:00'
					}]
				},{
					id:4,
					title:'晚上',
					children:[{
						id:18,
						title:'18:00'
					},{
						id:19,
						title:'19:00'
					},{
						id:20,
						title:'20:00'
					},{
						id:21,
						title:'21:00'
					},{
						id:22,
						title:'22:00'
					},{
						id:23,
						title:'23:00'
					}]
				}],
				weekRes:[],//当前显示
				dateRes:[[19,21,24],[1,2,3],[1,2,3],[16,19,22],[7,9,10],[12,13],[11]],//结果集
				showReport:false,
				reportList:[{
					id:1,
					title:'惡意騷擾或冒犯言論'
				},{
					id:2,
					title:'詐騙、虛假資訊或不當交易行為'
				},{
					id:3,
					title:'不雅或違反平台規範的內容'
				},{
					id:4,
					title:'其他違規內容'
				}],
				reportId:0,
				reportTitle:'',
				reportFontNum:0,
				yuyueTimes:[],
				keyboardHeight: 0,
				showReplay:false,
				replayContent:'',
				isFocus:false,
				rid:0,
				commentSrc:''
			}
		},
		onLoad(option) {
			// console.log(option)
			this.id = option.id;
			this.getContent();
			this.getComment();
			this.getLocalUser();
			uni.onKeyboardHeightChange(this.handleKeyboardChange)
		},
		onPageScroll(e) {
			// this.isFixed = e.scrollTop > this.navHeight;
			// console.log(e.scrollTop)
		},
		onReady(){
			
		},
		methods:{
			handleKeyboardChange(res) {
			  const { height } = res
			  this.keyboardHeight = height
			  
			  if(height > 0) {
				console.log('键盘弹起，高度为：', height)
				// 执行键盘弹起时的业务逻辑
			  } else {
				console.log('键盘收起')
				// 执行键盘收起时的业务逻辑
			  }
			},
			getLocalUser(){
				let guideLocal = uni.getStorageSync('guide');
				let info = uni.getStorageSync('userInfo');
				if(info.length != 0){
					//设置顶部用户信息
					this.userid = info.id;
					this.userInfo.avatar = info.avatar;
					this.userInfo.nickname = info.nickname;
				}
				if( guideLocal.length != 0 && guideLocal == false){
					this.guide = false;
				}
				
			},
			getContent(){
				let that = this;
				uni.showLoading();
				
				archivesDetail({id:this.id}).then((res) => {
					uni.hideLoading();
					that.setContent(res.archivesInfo || res) // 兼容不同数据结构
				}).catch((error) =>{
					console.error('获取内容失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				})
			},
			setContent(info){
				let that = this;
				console.log('API返回数据:', info); // 调试用
				
				// 修复：使用正确的字段名映射
				that.expertUserInfo.avatar = info.avatar || '/static/images/default-avatar.png';
				that.expertUserInfo.nickname = info.nickname || '未知用户';
				that.expertUserInfo.bio = info.bio || '';
				
				// 检查是否是作者
				if( info.uid == that.userid ){
					that.author = true;
				}
				
				// 修复轮播图数据
				that.banner_list = [];
				if(info.images && info.images.length > 0) {
					that.banner_list = info.images;
				} else if(info.cover) {
					that.banner_list = [info.cover];
				} else {
					that.banner_list = ['/static/images/default-banner.png'];
				}
				
				// 修复档案信息映射
				that.archives.id = info.id;
				that.archives.title = info.title || '无标题';
				that.archives.price = info.price ? parseFloat(info.price).toLocaleString() : '0';
				that.archives.address = info.address || '';
				that.archives.unitValue = info.unit || '';
				that.archives.updatetime = that.formatTimestamp(info.updated_at) || that.formatTimestamp(new Date().getTime()/1000);
				that.richText = info.description || '<p>暂无描述</p>';
				that.archives.likes = info.likes || 0;
				that.archives.is_like = info.is_like || 0;
				that.archives.collection = info.star || 0;
				that.archives.is_favorite = info.is_star || 0;
				that.archives.commentCount = info.comments || 0;
				that.archives.orderNumber = info.orders || 0;
				that.archives.channel_type = info.service_type || 0;
				that.archives.category = info.category_title || '';
				
				// 修复预约时间设置
				if(info.times) {
					that.yuyueTimes['monday'] = info.times.monday || '';
					that.yuyueTimes['tuesday'] = info.times.tuesday || '';
					that.yuyueTimes['wednesday'] = info.times.wednesday || '';
					that.yuyueTimes['thursday'] = info.times.thursday || '';
					that.yuyueTimes['friday'] = info.times.friday || '';
					that.yuyueTimes['saturday'] = info.times.saturday || '';
					that.yuyueTimes['sunday'] = info.times.sunday || '';
				}
			},
			getComment(){
				let that = this;
				uni.showLoading();
				
				getComment({id:this.id}).then((res) => {
					uni.hideLoading();
					that.setComment(res || [])
				}).catch((error) =>{
					console.error('获取内容失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				})
			},
			setComment(data){
				if(!data || !Array.isArray(data)) {
					this.commentList = [];
					return;
				}
				
				const list = [];
				for(let i in data){
					// 修复评论数据结构映射
					let comment = data[i];
					let res = {
						avatar: comment.avatar || comment.user?.avatar || '/static/images/default-avatar.png',
						nickname: comment.nickname || comment.user?.nickname || '匿名用户',
						city: comment.city || '',
						bio: comment.bio || comment.user?.bio || '',
						content: comment.content || '',
						likes: comment.likes || 0,
						createDate: comment.create_date || comment.created_at || '',
						is_likes: comment.is_likes || false,
						image: comment.image || false
					}
					list.push(res)
				}
				this.commentList = list;
			},
			formatTimestamp(timestamp){
				if(!timestamp) return '';
							
				try {
					// 处理字符串时间格式
					if(typeof timestamp === 'string') {
						const date = new Date(timestamp.replace(/-/g, '/'));
						const year = date.getFullYear();
						const month = date.getMonth() + 1;
						const day = date.getDate();
						return `${year}/${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}`;
					}
					
					// 处理时间戳
					const date = new Date(timestamp * 1000);
					const year = date.getFullYear();
					const month = date.getMonth() + 1;
					const day = date.getDate();
					
					return `${year}/${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}`;
				} catch(e) {
					console.error('时间格式化错误:', e);
					return '';
				}
			},
			goBack(){
				uni.navigateBack()
			},
			
			handleClick() {
				// const query = uni.createSelectorQuery().in(this)
				// query.select('#targetElement2').boundingClientRect(res => {
				// 	// const systemInfo = uni.getSystemInfoSync()
				// 	// const navBarHeight = systemInfo.statusBarHeight + 44 // 状态栏+导航栏高度
				// 	const navBarHeight = 0 // 状态栏+导航栏高度
				// 	const scrollTop = 1445
				// 	console.log('res.top:', res)
				// 	// uni.pageScrollTo({ scrollTop, duration: 300 })
				// }).exec()
				
				uni.pageScrollTo({
					scrollTop:this.targetElement.profile,
					duration: 300
				});
			},
			closeReserve(){
				this.showReserve = false;
			},
			checkExistInSimpleArray(id) {
				return this.weekRes.includes(id);
			},
			changeWeek(id){
				this.dateRes[this.week] = this.weekRes;
				this.week = id;
				this.weekRes = this.dateRes[id];
			},
			setReport(id){
				this.reportId = id;
			},
			handleInput(){
				this.reportFontNum = this.reportTitle.replace(/[\s\n]/g, '').length;
			},
			placeOrder(){
				if( this.usedLogin() ){
					uni.navigateTo({
						url: '/pages/order/place?id='+this.id,
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
				} 
			},
			handleLike(){
				if( this.usedLogin() ){
					uni.showLoading();
					let that = this;
					let data = {
						id:that.id
					}
					archivesLikes(data).then((res) => {
						//success
						uni.hideLoading();
						console.log(res)
						if( that.archives.is_like == true ){
							that.archives.is_like = false
							that.archives.likes--
						} else {
							that.archives.is_like = true
							that.archives.likes++
						}
					}).catch(() =>{
						
					})
				}
			},
			handleStar(){
				if( this.usedLogin() ){
					uni.showLoading();
					let that = this;
					let data = {
						id:that.id
					}
					archivesStart(data).then((res) => {
						//success
						uni.hideLoading();
						console.log(res)
						if( that.archives.is_favorite == true ){
							that.archives.is_favorite = false
							that.archives.collection--
						} else {
							that.archives.is_favorite = true
							that.archives.collection++
						}
					}).catch(() =>{
						
					})
				}
			},
			handleChat(){
				if( this.usedLogin() ){
					uni.navigateTo({
						url: '/pages/my/chatTalk',
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
				}
			},
			closeGuide(){
				this.guide = false;
				uni.setStorageSync('guide', false);
			},
			usedLogin(){
				console.log(this.userid)
				if(this.userid == 0){
					uni.showToast({
						title: "請先登錄",
						icon:'none',
						success: (res) => {
							
						},
						fail: (res) => {
							
						},
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/login',
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
					}, 1500);
					
					
					return false;
				}
				return true;
			},
			showReplayFn(){
				// uni.showKeyboard()
				this.showReplay = true;
				this.isFocus = true;
			},
			sendReplayFn(){
				let that = this;
				uni.showLoading();
				let data = {
					cid:that.archives.id,
					content:this.replayContent,
					image:this.commentSrc
				}
				commentReplay(data).then((res) => {
					//success
					uni.hideLoading();
					that.replayContent = '';
					that.commentSrc = '';
					that.getContent();
				}).catch(() =>{
					
				})
				that.isFocus = false;
				that.showReplay = false;
				uni.hideKeyboard();
			},
			chooseImg(){
				let that = this;
				let uploadUrl = uni.$u.http.config.baseURL+'/api/home/upload'
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						for(let i=0;i<tempFilePaths.length;i++){
							uni.uploadFile({
								url: uploadUrl,
								header: {
								    'Authorization': 'Bearer ' + uni.getStorageSync('token')// 从全局获取token
								},
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'type': 'reply',
									'timestamp': Date.now()
								},
								success: (uploadFileRes) => {
									// that.images.push({url:tempFilePaths[i]});
									console.log(uploadFileRes)
									let res = JSON.parse(uploadFileRes.data)
									that.commentSrc = res.fullurl;
									console.log(that.commentSrc)
								}
							});
						}
					},
					fail:(e)=>{
						console.log('error', e)
					},
					complete:(res)=>{
						console.log('complete', res)
					}
				});
			},
			removeCommentImg(){
				this.commentSrc = '';
			},
			sendReportFn(){
				this.showReport = false;
				uni.showToast({
					icon:'none',
					title:'檢舉已送出'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	.fixed-nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10rpx;
	}
	.tab-nav{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #F6F8FA;
		background-color: #ffffff;
		z-index: 999;
		
		.tab-nav-item{
			font-size: 28rpx;
			color: #808690;
			padding-bottom: 12rpx;
		}
		.tab-nav-item-active{
			font-size: 28rpx;
			color: #1AAEC0;
			padding-bottom: 12rpx;
			border-bottom: 3rpx solid #1AAEC0;
			font-weight: 500;
		}
	}
	.tab-content{
		width: 100%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		p {
			line-height: 1.5;/* 行高为字体大小的1.5倍 */
			margin: 1em 0; 
		}
	}
	.popup-reserve{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-reserve-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				width: 180rpx;
			}
			.title{
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
			}
		}
		.popup-reserve-body{
			margin-top: 40rpx;
			
			.week-item{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: rgba(190, 192, 197, 0.50);
			}
			.week-item-active{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: #020202;
				border-bottom: 2rpx solid #020202;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background-color: #F6F8FA;
				
			}
			.card{
				padding: 40rpx 32rpx 0;
				box-sizing: border-box;
			}
			.card-item{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #F6F8FA;
				color: #6A707C;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-item-active{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #27C5D6;
				color: #fff;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-footer{
				padding: 48rpx 32rpx 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.card-footer-info{
				margin-left: 16rpx;
				color: #232426;
				font-size: 24rpx;
				line-height: 140%;
				letter-spacing: 0.24px;
			}
			.card-footer-radio{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #E5E6E8;
			}
			
			.popup-reserve-footer{
				width: 100%;
				margin-top: 48rpx;
				display: flex;
				justify-content: center;
				
				.popup-reserve-footer-tips{
					display: flex;
					justify-content: center;
					margin: 0 4rpx;
					align-items: center;
				}
				
				.popup-reserve-bag-title{
					color:#232426;
					font-size: 24rpx;
					line-height: 140%;
					letter-spacing: 0.48rpx;
				}
				
				.popup-reserve-bag{
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
				.unactive{
					background-color: #E5E6E8;
				}
				.active{
					background-color: #27C5D6;
				}
			}
		}
	}
}
</style>